<template>
  <scroll-view class="article" :style="[mainStyle]" scroll-y @scroll='scroll'>
    <view class="jh-row jh-flex">
      <view class="article-main">
        <block v-for="(i,index) in textList" :key='index'>
          <image :style="{width: textwidth + 'px'}" style="display: block;" :src="ossDomain + '/article/passive-movement/article-text'+i+'.png'" mode="widthFix"></image>
        </block>
      </view>
      <view class="article-imgList">
        <block v-for="(i,index) in imgList" :key='index'>
          <image class="article-imgList-item margin-b5" :src="ossDomain + '/article/passive-movement/article-img'+i+'.png'" mode="widthFix"></image>
        </block>
        <!-- <block v-for="(i,index) in videoList" :key='index'>
          <video
            :id="'video'+index"
            :ref="'video'+index"
            class="article-imgList-item margin-b5"
            src="http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4"
            @play='play($event, index)'
            @timeupdate='timeupdate($event, index)'
            @pause='pause($event, index)'
          ></video>
        </block> -->
      </view>
    </view>
    <callService type='10'></callService>
    <!-- <video
      id='picture'
      ref='picture'
      class="article-fixed"
      :style="{width: !videoInView && video.inPlay ? '210px' : '1px', height: !videoInView && video.inPlay ? '120px' : '1px'}"
      muted
      src="http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4">
    </video> -->
    <!-- <image class="article-bg" :style="{width: width}" :src="ossDomain + '/article/article-bg.png'" mode="widthFix"></image> -->
  </scroll-view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import callService from '@/components/call-service/call-service'
  export default {
    components: {
      callService
    },
    props: {
      mainStyle: {
        type: Object,
        default: ''
      }
    },
    computed: {
      textwidth () {
        let num = parseInt(this.mainStyle.width) - 210
        return num > 441 ? 441 : num
      },
      viewHeight () {
        return parseInt(this.mainStyle.height)
      }
    },
    data() {
      return {
        ossDomain: uni.ossDomain,
        textList: [1,2,3,4,5,6,7,8,9,10],
        imgList: [1,2,3,4],
        videoList: [1,2,3,4,5],
        video: {
          index: '',
          context: null,
          inPlay: false,
          top: 0,
        },
        videoInView: false
      }
    },
    methods: {
      play (e, i) {
        console.log(e);
        let videoContext = uni.createVideoContext('video'+i)
        let top = 25 + (120 + 5) * 5 + (120 + 5) * i
        if (this.video?.context) {
          if (i != this.video.index) {
            this.video.context.stop()
            this.video = {
              index: i,
              context: videoContext,
              inPlay: true,
              top
            }
          }
        } else {
          this.video = {
            index: i,
            context: videoContext,
            inPlay: true,
            top
          }
        }
      },
      pause (e, i) {
        setTimeout(()=>{
          let videoContext = uni.createVideoContext('video'+i)
          if (videoContext == this.video.context) {
            this.video = {
              index: i,
              context: videoContext,
              inPlay: false
            }
          }
        },0)
      },
      timeupdate () {
        
      },
      scroll (e) {
        // console.log(e.detail.scrollTop);
        if (this.video?.context) {
          this.videoInView = e.detail.scrollTop < this.video.top + 120 && e.detail.scrollTop > this.video.top - this.viewHeight
          // console.log('video存在于屏幕中:',e.detail.scrollTop < this.video.top + 120 && e.detail.scrollTop > this.video.top - this.viewHeight)
          // console.log('top:',e.detail.scrollTop > this.video.top + 120)
          // console.log('bottom:',e.detail.scrollTop < this.video.top - this.viewHeight);
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .article{
    position: relative;
    &-main{
      margin-top: 20px;
    }
    &-imgList{
      padding-top: 30px;
      &-item{
        width: 210px;
        height: 120px;
      }
    }
    
    &-fixed {
      position: fixed;
      // position: absolute;
      top: 49px;
      right: 30px;
    }
  }
</style>
